<template>
  <div class="userInfo" :style="{'border-bottom': borderBottom}">
    <el-row>
<!--   面包屑导航    -->
      <el-col :span="10" class="breadcrumbInfo">
        <i class="el-icon-s-unfold" style="font-size: 25px"></i>&nbsp;
        <el-breadcrumb separator="/" >
          <el-breadcrumb-item
              v-for="(item,index) in breadList" :key="index">{{item.meta.title}}</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
<!--   用户头像及昵称   -->
      <el-col :span="5" :offset="9" class="infoDiv">
        <el-tooltip class="item" effect="dark" content="提示:帅气的你" placement="top-start" style="cursor: pointer">

          <el-avatar :size="50" :src="avatarUrl"></el-avatar>
        </el-tooltip>
        <el-dropdown style="cursor: pointer">
          <span class="el-dropdown-link infoUserDropdown" >
            {{nickname}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-show="!isLogin" @click.native="toLogin" >登录</el-dropdown-item>
            <el-dropdown-item v-show="isLogin" @click.native="logout">注销</el-dropdown-item>

          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {mapGetters,mapActions} from 'vuex'
export default {
  name: "UserInfo",
  inject:['reload'],
  data(){
    return{
      borderBottom:'2px solid black',
      nickname:'',
      isLogin:false,
      avatarUrl:'',
      breadList: [] // 路由集合
    }
  },
  computed:{
    ...mapGetters('LoginModule',['getStatus'])
  },

  mounted() {
    this.getBreadcrumb();
    //获取登录状态
    this.isLogin = this.getStatus;
    //根据登录状态显示昵称
    if (this.getStatus){
      this.nickname = JSON.parse(localStorage.getItem('user')).nickname || '尊敬的客人';
      this.avatarUrl = JSON.parse(localStorage.getItem('user')).avatarUrl;

    }else{
      this.nickname = "点击登录";
    }
  },
  methods:{

    //登录
    toLogin(){
      this.$router.push("/login")
    },
    //注销
    ...mapActions('LoginModule',['changeStatus']),
    logout(){
      localStorage.removeItem('user')
      this.changeStatus(false)
      this.$message.success("注销成功！");
      this.reload();
    },
    isHome(route) {
      return route.name === "Home";
    },
    getBreadcrumb() {
      let matched = this.$route.matched;
      //如果不是首页
      // matched.shift();
      this.breadList = matched;
    }
  },
  watch: {
    $route() {//监视router路由
      this.getBreadcrumb();
    }
  },
}
</script>

<style lang="scss" scoped>
  .userInfo{

    padding: 7px 0;
    .breadcrumbInfo{
      display: flex;
      justify-content: left;
      justify-items: left;
      align-items: center;
      margin-top: 25px;
    }
    .infoDiv{
      display: flex;
      justify-content: center;
      justify-items: center;
      align-items: center;
        .infoUserImage{
          width: 50px;
          height: 50px;
          border-radius: 50%;
          margin-right: 10px;
        }
    }
  }
</style>